<template>
	<view>
		<!-- <view :style="{ width: width + 'px', height: height + 'px' }" @click="showColorPicker" class="color-picker_trigger">
			<view :style="{ backgroundColor: predefined, border: `1px solid ${predefined}` }" class="color-picker_selected-color"></view>
		</view> -->
		<view>
			<view :class="['color-picker_block', isShow === 1 ? 'color-picker_block-show' : isShow === 2 ? 'color-picker_block-hide' : 'color-picker_block-none']">
				<movable-area :style="{ backgroundColor: bcColor }"  style="width: 180px;;height: 180px;" class="movable" id="movable">
					<movable-view class="white"></movable-view>
					<movable-view class="black"></movable-view>
					<movable-view @change="onTouchMoveSV"  :x="x" :y="y" inertia="true" direction="all" class="circle" id="circle"></movable-view>
				</movable-area>
				<slider
					:value="hValue"
					@change="onTouchMoveH"
					@changing="onTouchMoveH"
					activeColor="transparent"
					backgroundColor="transparent"
					class="line"
					block-size="18"
					max="360"
					style="width: 100%;"
				></slider>
				<view class="flex align-center" style="margin-top: 10px;">
					<view class="flex align-center" >
						<view :style="{ width: width + 'px', height: height + 'px' }" @click="showColorPicker" class="color-picker_trigger">
							<view :style="{ backgroundColor: (ouColor.hex || predefined), border: `1px solid ${predefined}` }" class="color-picker_selected-color"></view>
						</view>
						<view @click="onCopyHex" class="hex flex align-center">{{ ouColor.hex || predefined }}</view>
					</view>
					<button type="primary" class="time_picker_btn flex-shrink flex align-center" style="margin-top: 0px;height: 30px;" @tap="onConfirm">设置完成</button>
				</view>
				
				<!-- <view class="color-picker_show-hex">
					<view @click="onCopyHex" class="hex">{{ ouColor.hex || predefined }}</view>
					<button type="default" @click="isShow = 2" size="mini">取消</button>
					<view
						@click="onConfirm"
						:style="{ backgroundColor: ouColor.hex === '#FFFFFF' ? '#F5F5F5' : ouColor.hex, color: ouColor.hex === '#FFFFFF' ? '#000000' : '#FFFFFF' }"
						hover-class="confirm-hover"
						class="confirm"
					>
						确认
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import Color from './color';
export default {
	props: {
		width: {
			type: Number,
			default() {
				return 35;
			}
		},
		height: {
			type: Number,
			default() {
				return 35;
			}
		},
		defaultColor: {
			type: String,
			default() {
				return '#ffffff';
			}
		}
	},
	data() {
		return {
			predefined: '#ffffff',
			svRange: 100,
			app: {
				h: 0, // 0 - 360
				s: 0, // 0 - 100
				v: 0 // 0 - 100
			},
			isShow: 1, // 是否打开 colorPicker 组件 0:真关闭 1:打开 2:伪关闭
			ouColor: {
				hex: '',
				rgb: ''
			}, // rgb与hex 颜色 | 最后输出的颜色
			bcColor: '', // 颜色面板 背景颜色
			hValue: 0, // slider标签 的 value值 取值范围 0-360
			wSpeed: 0, // 宽度步长
			hSpeed: 0, // 高度步长
			x: 0, // 坐标x
			y: 0 // 坐标y
		};
	},
	mounted() {
		this.predefined = JSON.parse(JSON.stringify(this.defaultColor));
		this.init()
	},
	onServiceAttached() {},
	watch: {
		defaultColor(val) {
			this.predefined = val;
		}
	},
	methods: {
		// 打开 或 关闭 colorPicker 组件
		showColorPicker: function() {
			let show = this.isShow;
			if (!show) this.isShow = 1;
			else if (show === 1) this.isShow = 2;
			else if (show === 2) this.isShow = 1;
			this.setData({ isShow: this.isShow }, () => {
				if (this.isShow === 1) this.init();
			});
		},

		// 初始化 坐标系
		init: function() {
			this.wSpeed = (180 - 20) / this.svRange;
			this.hSpeed = (180 - 20) / this.svRange;
			this.onPredfinedColor();
		},

		// 设置预定颜色
		onPredfinedColor: function() {
			let c = this.predefined;
			c = c.replace(/\s*/g, '');
			if (/^#[0-9a-fA-F]{6}/g.test(c)) {
				const h = c.substring(1, 3),
					e = c.substring(3, 5),
					x = c.substring(5, 7);
				this.setRGB_XY(Color.hex_rgb([h, e, x]));
			} else if (c.match(/^[rR][gG][Bb][\(]([\d+,]*?)[\)]$/gi) !== null) {
				let str = c.split(','),
					r = str[0].split('(')[1],
					g = str[1],
					b = str[2].split(')')[0];

				this.setRGB_XY([r, g, b].map(this.checkRGB));
			} else {
				throw new Error(`The color type is wrong, it should be hex or rgb --- 颜色类型错误， 它应该是 16进制 或 RGB
		                        `);
			}
		},

		// 校验 rgb的合法值
		checkRGB: function(n) {
			n = parseInt(n);
			if (n > 255) throw new Error(`The value of rgb is wrong, it should be 0-255 --- rgb的值是错误的，范围0-255`);
			else return n;
		},

		// setData x 和 y 的坐标
		setRGB_XY: function([r, g, b]) {
			const { h, s, v } = Color.rgb_hsv(r, g, b);
			if(r === 255 &&  g === 255 && b === 255){
				this.ouColor.hex = '#FFFFFF'
			}
			this.app.h = h;
			this.setData({
				hValue: this.app.h,
				bcColor: Color.hsv_rgb(this.app.h, this.svRange, this.svRange).hex,
				x: Math.round(s * this.wSpeed),
				y: Math.round((this.svRange - v) * this.hSpeed)
			});
		},

		setData(obj, cb) {
			for (var key in obj) {
				this[key] = obj[key];
			}
			cb && cb();
		},
		// 获取 移动 S、V 的坐标
		onTouchMoveSV: function({ detail }) {
			const { x, y } = detail;
			// 将 x, y 坐标 转为 s, v 坐标
			this.app.s = Math.round(x.toFixed(0) / this.wSpeed);
			this.app.v = this.svRange - Math.round(y.toFixed(0) / this.hSpeed);
			this.setData({
				ouColor: Color.hsv_rgb(this.app.h, this.app.s, this.app.v)
			});
		},

		// 获取 移动 H 的坐标
		onTouchMoveH: function({ detail }) {
			const { value } = detail;
			this.app.h = value;
			this.bcColor = Color.hsv_rgb(this.app.h, this.svRange, this.svRange).hex;
			this.ouColor = Color.hsv_rgb(this.app.h, this.app.s, this.app.v);
		},

		// 复制 hex 的值
		onCopyHex: function() {
			wx.setClipboardData({
				data: this.ouColor.hex || this.predefined
			});
		},

		// 确认颜色，传出回调
		onConfirm: function() {
			this.setData({ predefined: this.ouColor.hex });
			this.$emit('changecolor', this.ouColor);
			this.showColorPicker();
		}
	}
};
</script>

<style>
.color-picker_trigger {
	border: 1px solid #e6e6e6;
	box-sizing: border-box;
	padding: 4px;
	border-radius: 2px;
	box-shadow: 0 0 2px 0 #e6e6e6;
}
.color-picker_selected-color {
	width: 100%;
	height: 100%;
	border-radius: 2px;
	display: block;
	box-sizing: border-box;
}

.color-picker_bc-show {
	visibility: visible;
	opacity: 1;
}

.color-picker_bc-hide,
.color-picker_bc-none {
	visibility: hidden;
	opacity: 0;
	/* transition: all 0.3s; */
}

.color-picker_bc {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999998;
	background-color: rgba(0, 0, 0, 0.3);
}

.color-picker_block {
	width: 100%;
/* 	position: fixed;
	bottom: 1%;
	left: 1%;
	background-color: #fff;
	border-radius: 30px;
	z-index: 999999;
	height: 70vh; */
}

.color-picker_block-show {
	/* animation: show 0.3s forwards; */
	opacity: 1;
}
@keyframes show {
	from {
		transform: translateY(80%);
	}

	to {
		transform: translateY(0);
	}
}

.color-picker_block-hide {
	/* animation: hide 0.3s forwards; */
}
@keyframes hide {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
		display: none;
		opacity: 0;
	}
}

.color-picker_block-none {
	transform: translateY(100%);
	display: none;
	opacity: 0;
}

.movable {
	width: 85vw;
	margin: 0 auto;
	margin-top: 40px;
	height: 40vh;
	background-color: red;
	position: relative;
	border-radius: 2px;
}
.white {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
}

.black {
	background: linear-gradient(00deg, #000, transparent);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border-radius: 2px;
}
.circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #fff;
	border-radius: 50%;
}

.line {
	width: 85vw;
	margin: 0 auto;
	margin-top: 20px;
	height: 18px;
	background: -webkit-linear-gradient(left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
	border-radius: 2px;
}

.color-picker_show-hex {
	width: 85vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	bottom: 30px;
	left: 7.5vw;
}
.hex {
	width: auto;
	padding: 0px 3px;
	font-size: 12px;
	border: 1px solid #dad7da;
	border-radius: 3px;
	height: 30px!important;
	margin-left: 5px;
}
.confirm {
	padding: 2px 15px;
	background-color: #f5f5f5;
	color: #000;
	border-radius: 3px;
	font-size: 15px;
}
.confirm-hover {
	box-shadow: 0px 0px 10px #bbbec4 inset;
}
</style>
